<!--
 * @Author: your name
 * @Date: 2022-01-01 10:12:37
 * @LastEditTime: 2022-01-10 09:55:40
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \my-site\src\views\blog\components\rightList.vue
-->

<template>
  <ul class="rightList-container">
    <li v-for="(item, i) in data" :key="i">
        <span @click="handleSelect(item)" :class="{active:item.active}">{{item.name}}</span>
        <span v-if="item.articleCount" class="articleCount" :class="{active:item.active}">{{item.articleCount}}</span>
        <RightList :data="item.children" @select="handleSelect"/>
    </li>
  </ul>
</template>

<script>
export default {
    name:"RightList",
    props:{
        // 数据格式[{name:xxx, children:[{name:xxx, children:[]}]}]
        data:{
            props:Array,
            default:() => [] //数组，对象的默认值通过函数返回
        }
    },
    methods:{
        handleSelect(item){
            this.$emit("select", item)
        }
    }
}
</script>

<style lang="less" scoepd>
@import "~@/styles/var.less";
.rightList-container{
    list-style-type:none;
    cursor:pointer;
    margin:20px 0px;
    font-size:14px;
    & > *{
        letter-spacing:0.1em;
    }
    li > span:hover{
        font-weight:bold;
        color:@warn;
        .articleCount{
            color:@warn
        }
    }
    .articleCount{
        margin-left:10px;
        font-size:12px;
        color:@gray;
    }
    .rightList-container{
        padding-left:40px;
    }
    .active{
        font-weight:bold;
        color:@warn
    }
}
</style>